import React, { Component } from 'react';
import { Form, Row, Col } from 'antd';
import styles from '../../../index.less';
import StaticEditTable from '../Common/ProductStaticEditTable';

const FormItem = Form.Item;

class MaterialPpopComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: props.formData,
      disabled: props.disabled, /* 是否是查看状态 */
      workOrderMaterialSlaveConfig: {}, /* 从表配置 */
      headerConfig: [], /* 表头配置 */
    };
  }

  componentWillMount() {
    /* 获取主表数据 */
    const { formData } = this.state;
    const workOrderMaterialSlaveConfig = formData.filter(item => (item.sTbName.toLowerCase() === 'mftproductmaterials' && item.sSqlStr === undefined))[0];
    /* 获取表头 */
    const headerConfig = [];
    for (const child of workOrderMaterialSlaveConfig.gdsconfigformslave) {
      if (child.sName !== '' && child.bVisible && child.showName !== '') {
        headerConfig.push({
          title: child.showName,
          dataIndex: child.sName,
          width: child.iFitWidth,
        });
      }
    }
    this.setState({ headerConfig, workOrderMaterialSlaveConfig });
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      disabled: nextProps.disabled,
    });
  }

  /* 用于返回列表编辑框弹窗所属行主键 */
  handleRecordKey = (key) => {
    this.props.handleRecordKey({ workOrderMaterialDataKey: key });
  };

  render() {
    const {
      handleMaterialData,
      handleModalPane,
      dataName,
      dataType,
    } = this.props;
    const { app, form, workOrderMaterialData/* dataName, dataType, handleModalPane */ } = this.props;
    /* 过滤数据,只展示单个控制表数据以及成品材料 */
    let workOrderControlMaterialData = [];
    if (this.props.workOrderJigsawSelectKey !== '') {
      workOrderControlMaterialData = workOrderMaterialData.filter(item => (item.sControlId === this.props.workOrderJigsawSelectKey || item.sType === '2'));
    }
    const { headerConfig, disabled, workOrderMaterialSlaveConfig } = this.state;
    const staticEditProps = {
      showConfigList: workOrderMaterialSlaveConfig.gdsconfigformslave,
      headerConfig,
      dataListAll: workOrderControlMaterialData,
      disabled,
      handleTableData: handleMaterialData,
      handleRecordKey: this.handleRecordKey, /* 用于返回列表编辑框弹窗所属行主键 */
      app,
      form,
      handleModalPane,
      dataName,
      dataType,
    };
    return (
      <FormItem className={styles.workerFormPop}>
        <Row type="flex" className={styles.workerFormRow}>
          <Col span={2}>
            <div className={styles.item}>材<br />料</div>
          </Col>
          <Col span={22}>
            <StaticEditTable
              {...staticEditProps}
            />
          </Col>
        </Row>
      </FormItem>
    );
  }
}

export default MaterialPpopComponent;
